import { useState, useEffect } from "react";
import "./index.less";
import { Input, message } from "antd";
import { request } from "../../../../../../../common/request";
import { urls } from "../../../../../../../common/urls";

function BandCard() {
  const [userName, setUserName] = useState('');
  const [bankName, setBankName] = useState('');
  const [bankAccount, setBankAccount] = useState('');

  const handleSetUserName = (e: any) => {
    setUserName(e.target.value);
  }

  const handleSetBankName = (e: any) => {
    setBankName(e.target.value);
  }

  const handleSetBankAccount = (e: any) => {
    setBankAccount(e.target.value);
  }

  const submitBankCard = () => {
    request({
      method: "post",
      data: {
        method: urls.submitBankCard,
        bank_username: userName,
        bank_name: bankName,
        bank_account: bankAccount
      },
    }).then((res: any) => {
      message.success(res.msg);
    }).catch((err) => {
      message.error(err);
    });
  };

  const getBankCard = () => {
    request({
      method: "post",
      data: {
        method: urls.getBankCard
      },
    }).then((res: any) => {
      setUserName(res.data.bank_username);
      setBankName(res.data.bank_name);
      setBankAccount(res.data.bank_account);
    });
  };

  useEffect(() => {
    getBankCard();
  }, []);

  return (
    <>
      <div className="bandCard-page text-style">
        <div>
          <div className="link-item" style={{ borderTop: "none" }}>
            <div>姓名</div>
            <Input
              className="bandCard-item-input"
              placeholder="请输入姓名"
              value={ userName }
              onChange={ handleSetUserName }
            />
          </div>
          <div className="link-item">
            <div>开户行</div>
            <Input
              className="bandCard-item-input"
              placeholder="请输入新开户行"
              value={ bankName }
              onChange={ handleSetBankName }
            />
          </div>
          <div className="link-item">
            <div>银行卡号</div>
            <Input
              className="bandCard-item-input"
              placeholder="请输入银行卡号"
              value={ bankAccount }
              onChange={ handleSetBankAccount }
            />
          </div>
        </div>
        <div className="bandCard-btn" onClick={ submitBankCard }>保存</div>
      </div>
    </>
  );
}

export default BandCard;
